<template>
	<view class="page-content">
		<card :title="'湿地植被动态监测'" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="../../static/mapMonitor/hdxf.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">水域增长面积</view>
						<view class="value"><text>{{ dataResource.waterGrowthArea }}</text>m²</view>
					</view>
					<view class="item borders">
						<view class="title">流域面积</view>
						<view class="value"><text>{{ dataResource.basinArea }}</text>m²</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">动态变化</view>
						<view class="unit">单位：m²</view>
					</view>
					<view class="charts-box">
						<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"
							@touchstart="touchLineA"></canvas>						
					</view>
					<!-- <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas> -->
				</view>
			</view>
		</card>
		<card title="湿地生物多样性监测" class="m-card">
			<view class="m-card-content p-content">
				<image class="img" src="../../static/mapMonitor/sw.png" mode="widthFix"></image>
				<view class="items">
					<view class="item">
						<view class="title">植物种类</view>
						<view class="value"><text>{{ dataResource.plantSpecies }}</text>种</view>
					</view>
					<view class="item">
						<view class="title">植物数量</view>
						<view class="value"><text>{{ dataResource.numberPlants }}</text>万颗</view>
					</view>
					<view class="item">
						<view class="title">动物种类</view>
						<view class="value"><text>{{ dataResource.animalSpecies }}</text>种</view>
					</view>
					<view class="item">
						<view class="title">动物数量</view>
						<view class="value"><text>{{ dataResource.numberAnimals }}</text>万只</view>
					</view>
				</view>
			</view>
		</card>
		<card title="湿地鸟类识别分析" class="m-card">
			<view class="m-card-content v-content">
				<video src="rtsp://admin:DXF12345678@222.92.22.242:1554/H.264/ch1/main/av_stream" controls class="video"></video>
				<view class="flex flex-middle title-bar">
					<view class="flex-item title">识别方法</view>
					<view class="tips">{{ dataResource.recognitionMethod }}</view>
				</view>
				<view class="content">
					<view class="title">特征提取</view>
					<view class="tips">{{ dataResource.featureExtraction }}</view>
				</view>
			</view>
		</card>
		<card title="水质动态监测" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/sz.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">PH值</view>
						<view class="value"><text>{{ dataResource.ph }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">浊度</view>
						<view class="value"><text>{{ dataResource.turbidity }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">电导率</view>
						<view class="value"><text>{{ dataResource.electricalConductivity }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">溶解氧</view>
						<view class="value"><text>{{ dataResource.dissolvedOxygen }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水质氨氮</view>
						<view class="value"><text>{{ dataResource.ammoniaNitrogen }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水溶液水质COD</view>
						<view class="value"><text>{{ dataResource.solutionCod }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水溶液离子</view>
						<view class="value"><text>{{ dataResource.aqueousIon }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">水体藻类叶绿素浓度</view>
						<view class="value"><text>{{ dataResource.algaeChlorophyll }}</text></view>
					</view>
				</view>
			</view>
		</card>
		<card title="湿地盐碱化动态监测" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="../../static/mapMonitor/sd.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">面积</view>
						<view class="value"><text>{{ dataResource.wetlandArea }}</text>m²</view>
					</view>
					<view class="item borders">
						<view class="title">占总面积比例</view>
						<view class="value"><text>{{ dataResource.proportionTotalArea }}</text>%</view>
					</view>
				</view>
				<view class="charts-box">
					<view class="flex charts-title">
						<view class="flex-item title">动态变化</view>
						<view class="unit">单位：%</view>
					</view>
					<canvas canvas-id="canvasLineB" id="canvasLine" class="charts" @touchstart="touchLineB"></canvas>
				</view>
			</view>
		</card>
		<card title="湿地鸟类活动数量分析" class="m-card">
			<view class="m-card-content f-content">
				<image class="img" src="../../static/mapMonitor/nl.png" mode="widthFix"></image>
				<view class="flex items">
					<view class="item borders">
						<view class="title">湿地鸟类数量</view>
						<view class="value"><text>{{ dataResource.wetlandBirdPopulation }}</text>种</view>
					</view>
					<view class="item borders">
						<view class="title">活动范围面积</view>
						<view class="value"><text>{{ dataResource.areaActivity }}</text>m²</view>
					</view>
				</view>
			</view>
		</card>
		<card title="湿地蓝藻爆发预警" class="m-card">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/lz.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">湿地水质指数</view>
						<view class="value">
							<text>{{ dataResource.qualityIndex }}</text>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">湿地微生物指数</view>
						<view class="value"><text>{{ dataResource.microbialIndex }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">蓝藻爆发可能性</view>
						<view class="value"><text>{{ dataResource.cyanobacteriaBlooms }}</text>%</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">蓝藻预计爆发时间</view>
						<view class="value"><text>{{ dataResource.estimatedTime }}</text></view>
					</view>
				</view>
			</view>
		</card>
		<card title="湿地生态保护规划" class="m-card" v-if="array.length>0">
			<view class="m-card-content r-content">
				<image class="img" src="../../static/mapMonitor/hdxf.png" mode="widthFix"></image>
				<view class="items">
					<view class="flex flex-middle item">
						<view class="flex-item title">待修复区名称</view>
						<view class="value">
							<picker @change="bindPickerChange" :value="index" :range="array" range-key="condition">
								<view class="uni-input">{{array[index].condition}}</view>
							</picker>
						</view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复方案</view>
						<view class="value"><text>{{ planData.val1 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复过程监测</view>
						<view class="value"><text>{{ planData.val2 }}</text></view>
					</view>
					<view class="flex flex-middle item">
						<view class="flex-item title">修复效果评价</view>
						<view class="value"><text>{{ planData.val3 }}</text></view>
					</view>
				</view>
			</view>
		</card>
	</view>
</template>

<script>
	import card from "@/components/card/card.vue"
	import uCharts from '@/components/u-charts/u-charts.js';
	let _self, canvaLineA, canvaLineB
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,

				date: '2021-02-24',
				startDate: '2021-01-01',
				endDate: '2022-01-01',
				array: [],
				index: 0,
				dataResource: '',
				planData: '',
				vegetationData: '',
				salinizationData: '',
				vegetationChartData: ''
			}
		},
		components: {
			card
		},
		onLoad() {
			_self = this
			this.cWidth = uni.upx2px(630);
			this.cHeight = uni.upx2px(370);
			this.getData()
		},
		methods: {
			getData() {
				this.$$.request({
					url: this.config.getSzeda,
					method: "GET",
					data: {}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						this.dataResource = res.data
						this.array = res.data.list
						this.getCanvas(res.data.vegetationMonitoring, this.vegetationCanvas)
						this.getCanvas(res.data.wetlandSalinization, this.salinizationCanvas)
						this.getPlan(this.array[0].id)
					}
				}).catch(() => {
					console.log("请求失败")
				}).finally(() => {
					console.log("complate")
				})
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				let id = this.array[this.index].id
				this.getPlan(id)
			},
			setLineOption(data) {
				let option = {
					categories: [],
					series: [{
						name: '',
						data: [],
						color: '#F39800'
					}]
				}
				data.forEach((item, index) => {
					option.categories.push(item.timerShaft)
					option.series[0].data.push(item.numericalValue)
				})

				return option

			},
			setDefaultOption(canvasId, chartData){
				let opts = {
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					// padding: [0, 15, 10, 15],
					legend: {
						show: false,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
					},
					yAxis: {
						gridType: 'solid',
						gridColor: '#E5E5E5',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false
						},
						"tooltip":{
							"showBox": true,
						}
					}
				}
				return opts
			},
			showLineA(canvasId, chartData) {
				let opt = this.setDefaultOption(canvasId, chartData)
				canvaLineA = new uCharts(opt);	
			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			showLineB(canvasId, chartData) {
				let opt = this.setDefaultOption(canvasId, chartData)
				canvaLineB = new uCharts(opt);	
			},
			touchLineB(e) {
				canvaLineB.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			getPlan(search) {
				this.$$.request({
					url: this.config.getSearchResult + '/' + search,
					method: "GET",
					data: {}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						this.planData = res.data
					}
				}).catch(() => {
					console.log("请求失败")
				}).finally(() => {
					console.log("complate")
				})
			},
			getCanvas(search, callback) {
				this.$$.request({
					url: this.config.getCanvasData,
					method: "GET",
					data: {
						type: search
					}
				}, true, true).then((res) => {
					console.log(res)
					if (res.code == 2000) {
						callback && callback(res.data)
					}
				}).catch((erro) => {
					console.log("请求失败", erro.message)
				}).finally(() => {
					console.log("complate")
				})
			},
			vegetationCanvas(data) {
				if (data.length > 0) {
					let opts = this.setLineOption(data)
					this.showLineA('canvasLineA', opts)
				}

			},
			salinizationCanvas(data) {
				if (data.length > 0) {
					let opts = this.setLineOption(data)
					this.showLineA('canvasLineB', opts)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F4F4F4;
	}

	.charts-box {

		.charts-title {
			padding: 30upx 0 10upx;
			font-size: 24upx;

			.title {
				color: #333;
			}

			.unit {
				color: #999;
			}
		}
	}

	.charts {
		width: 630upx;
		height: 370upx;
		background-color: #FFFFFF;
	}

	.page-content {
		padding: 30upx;

	}

	.m-card {
		margin-bottom: 20upx;

		.m-card-content {
			.img {
				display: block;
				margin: 0 auto;
				width: 200upx;
				height: 140upx;
			}
		}

		.p-content {
			position: relative;
			padding: 80upx 0 125upx;
			margin: -30upx 0 -30upx;

			.img {
				width: 292upx;
			}

			.items {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.item {
				width: 34%;
				margin-top: 40upx;

				&:nth-child(even) {

					.title,
					.value {
						padding-left: 60upx;
					}
				}

				&:nth-child(odd) {
					padding-left: 30upx;
				}
			}

			.title {
				font-size: 28upx;
				color: #333;
			}

			.value {
				font-size: 28upx;
				color: #999;

				text {
					font-size: 36upx;
					color: #00A0E9;
				}
			}
		}

		.r-content {
			position: relative;

			.grade {
				position: absolute;
				top: 10upx;
				left: 50%;
				font-size: 60upx;
				color: #00DCB0;
				transform: translateX(-50%);
			}

			.flex {
				padding: 0 30upx;
				margin-bottom: 20upx;
				height: 70upx;
				background: #F8F8F8;
				border-radius: 35upx;

				&:last-child {
					margin-bottom: 0;
				}

				.title {
					font-size: 28upx;
					color: #333;
				}

				.value {
					font-size: 28upx;
					color: #999;

					text {
						font-size: 30upx;
					}
				}

				.uni-input::after {
					font-family: iconfont;
					content: '\e659';
					margin-left: 10upx;
					font-size: 24upx;
				}
			}
		}

		.f-content {
			.items {
				justify-content: space-between;
				margin: 0 -7upx;
			}

			.item {
				flex: 1;
				margin: 0 7upx;
				height: 120upx;
				padding-top: 25upx;
				text-align: center;
			}

			.title {
				margin-bottom: 10upx;
				font-size: 28upx;
				color: #333;
			}

			.value {
				font-size: 28upx;
				color: #999;

				text {
					font-size: 36upx;
					color: #00A0E9;
				}
			}
		}

		.v-content {
			.video {
				margin-bottom: 40upx;
				width: 100%;
				height: auto;
			}

			.title {
				font-size: 28upx;
				color: #333;
			}

			.tips {
				font-size: 30upx;
				color: #787C90;
			}

			.title-bar {
				padding: 0 30upx;
				margin-bottom: 20upx;
				height: 70upx;
				background: #F8F8F8;
				border-radius: 35upx;
			}

			.content {
				padding: 20upx 30upx;
				background: #F8F8F8;
				border-radius: 6upx;

				.title {
					margin-bottom: 10upx;
				}
			}
		}
	}
</style>
